<template>
  <view class="history-page">
    <view class="navbar">
      <text class="title">浏览记录</text>
      <text class="clear-btn" @click="clearAll">清空记录</text>
    </view>

    <!-- 无记录状态 -->
    <view class="empty" v-if="historyList.length === 0">
      <uni-icons type="eye" size="60" color="#ddd"></uni-icons>
      <text class="empty-text">暂无浏览记录</text>
    </view>

    <!-- 浏览记录列表 -->
    <view class="history-list" v-else>
      <view class="history-item" v-for="(item, index) in historyList" :key="index" @click="goToDetail(item.goodsId)">
        <image :src="item.goodsImg" class="goods-img" mode="aspectFill"></image>
        <view class="goods-info">
          <text class="goods-name">{{ item.goodsName }}</text>
          <text class="goods-price">¥{{ item.goodsPrice }}</text>
          <text class="browse-time">{{ formatTime(item.browseTime) }}</text>
        </view>
        <uni-icons type="trash" size="20" color="#999" class="delete-icon" @click.stop="deleteItem(index)"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      historyList: [] // 浏览记录列表
    };
  },

  onShow() {
    // 页面显示时读取本地存储的浏览记录
    this.loadHistory();
  },

  methods: {
    // 加载浏览记录
    loadHistory() {
      const history = uni.getStorageSync('browseHistory') || [];
      // 按浏览时间倒序排列（最新的在前）
      this.historyList = history.sort((a, b) => b.browseTime - a.browseTime);
    },

    // 格式化时间
    formatTime(timestamp) {
      const date = new Date(timestamp);
      return `${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
    },

    // 跳转到商品详情
    goToDetail(goodsId) {
      uni.navigateTo({
        url: `/pages/goods/goodsDetail?goodsId=${goodsId}`
      });
    },

    // 删除单条记录
    deleteItem(index) {
      this.historyList.splice(index, 1);
      uni.setStorageSync('browseHistory', this.historyList);
    },

    // 清空所有记录
    clearAll() {
      uni.showModal({
        title: '提示',
        content: '确定要清空所有浏览记录吗？',
        success: (res) => {
          if (res.confirm) {
            this.historyList = [];
            uni.removeStorageSync('browseHistory');
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.history-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.clear-btn {
  color: #ff5722;
  font-size: 14px;
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 100px;
}

.empty-text {
  margin-top: 20px;
  color: #999;
  font-size: 16px;
}

.history-list {
  padding: 10px;
}

.history-item {
  display: flex;
  align-items: center;
  padding: 12px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 8px;
}

.goods-img {
  width: 80px;
  height: 80px;
  border-radius: 4px;
}

.goods-info {
  flex: 1;
  margin: 0 12px;
  overflow: hidden;
}

.goods-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.4;
}

.goods-price {
  display: block;
  margin-top: 8px;
  color: #ff5722;
  font-size: 16px;
  font-weight: bold;
}

.browse-time {
  display: block;
  margin-top: 4px;
  color: #999;
  font-size: 12px;
}

.delete-icon {
  margin-left: 8px;
}
</style>